<template>
  <div>
    <template v-if="loginStatus">
      <div class="breadcrumb clearfix">
        <div class="float-left">
          <span>{{breadcrumb.leaveOne}}</span>
          <span v-if="breadcrumb.leaveTwo">&gt;&nbsp;{{breadcrumb.leaveTwo}}</span>
          <span v-if="breadcrumb.leaveThree">&gt;&nbsp;{{breadcrumb.leaveThree}}</span>
        </div>
        <div class="float-right">
          <router-link :to="{name:'topicAll'}">订阅管理</router-link>
        </div>
      </div>
      <div class="label-list-wrap" v-if="labelStatus">
        <div class="label-box down">
          <span v-for="item in labelList" :class="{'active':item.status}" @click="choose(item)">{{item.name}}</span>
        </div>
      </div>
      <template v-for="item in list">
        <template v-if="item.content.type === 'hot-report'">
          <hot :content="item"></hot>
        </template>
        <template v-else>
          <item :note="noteStatus" :content="item"></item>
        </template>
      </template>
      <div class="load-more-wrap flex">
        <template v-if="more">
          <img src="../../assets/svg/load-mord.svg" alt="" v-if="loadStatus">
          <button v-else @click="loadMore">加载更多</button>
        </template>
        <template v-else>
          <span>暂无更多数据</span>
        </template>
      </div>
    </template>
    <template v-else>
      <div class="not-login">
        <p>对不起，您还没有登录.... ^_^</p>
        <p>快点击<span @click="login">登录</span>获取更多信息</p>
      </div>
    </template>
  </div>
</template>
<script>
  import item from '../../components/news/imgListItem'
  import hot from '../../components/news/hot'
  import request from '../../../api/request'
  export default {
    name: 'mySubscribe',
    data () {
      return {
        noteStatus: true,
        loadStatus: false,
        page: 1,
        pageSize: 30,
        list: [],
        more: true,
        id: 1,
        labelStatus: false,
        labelList: []
      }
    },
    created () {
      this.id = parseInt(this.$route.params.id)
      this.typeInit()
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        category_id: this.id
      }
      this.req(data)
    },
    computed: {
      loginStatus () {
        return this.$store.state.user.loginStatus
      },
      breadcrumb () {
        return this.$store.state.news.breadcrumb
      }
    },
    watch: {
      $route () {
        this.loadStatus = true
        this.list = []
        this.page = 1
        this.id = parseInt(this.$route.params.id)
        this.typeInit()
        let data = {page: this.page, pageSize: this.pageSize, category_id: this.id}
        if (this.loginStatus) {
          this.req(data)
        }
      },
      loginStatus () {
        let data = {}, name = this.$route.name, id = parseInt(this.$route.params.id)
        if (name === 'alerts') {  // 蜂鸟快讯
          data.index = 0
        } else if (name === 'hot') {  // 热门话题
          data.index = 1
        } else if (name === 'subscribe') {  // 我的话题
          data.index = 2
        } else {  // 话题定制
          data.index = 3
        }
        data.id = id
        this.$store.dispatch('news/getMenue', data)
        this.req({page: this.page, pageSize: this.pageSize, category_id: this.id})
      }
    },
    components: {
      item,
      hot
    },
    methods: {
      login () {
        this.$logPop(true).then((response) => {
          if (response.code === '200') {
            if (!response.data.inited) {  // 如果是第一次登录
              this.$store.dispatch('user/modifyLogin').then((response) => {
                if (response.code === '200') {
                  this.$router.push({name: 'subscrible'})
                }
              })
            }
          }
        })
      },
      loadMore () {
        this.loadStatus = true
        let data = {
          page: this.page,
          pageSize: this.pageSize,
          category_id: this.id
        }
        this.req(data)
      },
      req (data) {
        this.more = true
        request.get('myTopic', data).then((response) => {
          if (response.data.code === '200') {
            this.list = this.list.concat(response.data.data.items)
            this.page++
            this.loadStatus = false
            if (!response.data.data.items.length) {
              this.more = false
            }
          }
        })
      },
      typeInit () {
        if (this.id === 1024) {
          this.labelStatus = true
          request.get('myTopicKeyWord', {category_id: this.id}).then((response) => {
            if (response.data.code === '200') {
              let arr = []
              response.data.data.menu.forEach((item, index) => {
                (index) ? (item.status = false) : (item.status = true)
                arr.push(item)
              })
              this.labelList = arr
              this.$store.commit('news/saveLeaveThree', '全部')
            }
          })
        } else {
          this.labelStatus = false
        }
      },
      choose (data) {
        this.labelList.forEach((item) => {
          item.status = false
        })
        this.$store.commit('news/saveLeaveThree', data.name)
        data.status = true
        this.loadStatus = true
        this.list = []
        this.page = 1
        this.req({page: this.page, pageSize: this.pageSize, category_id: data.id})
      }
    }
  }
</script>
